/* 我的商城 */
/* 面包屑导航 */
/* 页面主体内容 */
.content{
  background: #f5f5f5;
}
.crumb{
  padding: 30px 0 20px;
}
.crumb{
  font-size: 12px;
  color: #666;
}
.crumb>a{
  color: #666;
}
.crumb>a:hover{
  color: #333;
}
.crumb>span{
  margin: 0 12px;
}
.icon-jiantou{
  font-size: 12px !important;
}
/* 主体内容 */
.section{
  display: flex;
  justify-content: space-between;
}
.section .aside-l{
  height: 994px;
  padding: 27px 0 0 0px;
  border-radius: 12px;
  background: #fff;
  flex: 0 0 14.5%;
}
.border-F6{
  border-bottom:1px solid #F6F6F6 ;
}
.aside-l ul>li>a:hover{
  color: #cf0a2c !important;
}
.section .aside-l h1{
  padding: 0 0 27px 36px;
  font-size: 18px;
  font-weight: 400;
}
.section .aside-l h1>a{
  color: #cf0a2c;
}
/* 我的消息 && 订单中心 && 我的资产 && 购买支持*/
.aside-l .mymsg,
.aside-l .ordercenter,
.aside-l .assets,
.aside-l .support,
.aside-l .privacy,
.aside-l .help{
  padding: 20px 0 0 36px;
}
.aside-l .mymsg>li,
.aside-l .ordercenter>li,
.aside-l .assets>li,
.aside-l .support>li,
.aside-l .privacy>li,
.aside-l .help>li{
  margin-bottom: 15px;
  font-size: 14px;
}
.aside-l .mymsg>li:first-child,
.aside-l .ordercenter>li:first-child,
.aside-l .assets>li:first-child,
.aside-l .support>li:first-child,
.aside-l .privacy>li:first-child,
.aside-l .help>li:first-child{
  font-weight: 700;
}
.aside-l .mymsg>li>a,
.aside-l .ordercenter>li>a,
.aside-l .assets>li>a,
.aside-l .support>li>a{
  color: #777;
}
.aside-l .privacy>li>a,
.aside-l .help>li>a{
  color: #333;
  font-weight: 700;
}
.aside-l .privacy>li>a:hover,
.aside-l .help>li>a:hover{
  color: #333 !important;
}
/* 右侧用户信息 */
.main {
  flex: 0 0 84%;
}
.main .user-detail {
  display: flex;
  height: 220px;
  padding: 50px 50px 50px 60px;
  border-radius: 12px;
  background: #fff;
  justify-content: space-between;
}
.main .user-detail .picture{
  height: 108px;
  border-radius: 50%;
  flex: 0 0 108px;
}
.main .user-detail .email{
  display: flex;
  height: 175px;
  flex: 0 0 200px;
  flex-direction: column;
}

.main .user-detail .email>a:first-child{
  width: 70%;
  font-size: 19px;
  color: #000;
  /* 溢出隐藏，并显示省略号 */
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.main .user-detail .email .grade{
  position: relative;
  display: flex;
  width: 200px;
  height: 20px;
}
.main .user-detail .email .grade .range{
  position: relative;
  width: 104px;
  height: 10px;
  margin: 10px 10px 0 0;
  border-radius: 8px;
  background: #eaeaea;
}
/* 小徽章 */
.main .user-detail .email .grade .badge{
  position: absolute;
  width: 20px;
  height: 20px;
  margin-top: -5px;
  border-radius: 50%;
  background: url(../images/icon01.svg) no-repeat;
  background-position: -263px 0px;
}
.main .user-detail .email .grade>em{
  margin-top: 6px;
  font-size: 12px;
  color:#3a3a3a
}
/* 会员权益按钮 */
.main .user-detail .email .interests{ 
  display: flex;
  margin-top: 20px;
  font-size: 13px;
}
.main .user-detail .email .interests>a{
  width: 84px;
  border-radius: 8px;
  text-align: center;
  line-height: 28px;
}
.main .user-detail .email .interests>a:first-child{
  margin-right: 20px;
  background: #595454;
  color: #fde4b3;
}
.main .user-detail .email .interests>a:first-child:hover{
  background: #000;
}

/* 账号中心按钮 */
.main .user-detail .email .interests>a:nth-child(2){
  border: 1px solid #888;
  color: #000;
}
.main .user-detail .email .interests>a:nth-child(2):hover{
  border: 1px solid #000;
}
/* 积分 && 优惠券 && 代金券 */
.main .user-detail .integral,
.main .user-detail .coupon,
.main .user-detail .vouchers,
.main .user-detail .petal{
  text-align: center;
}
.main .user-detail .num{
  font-size: 28px;
  color: #3a3a3a;
}
.main .user-detail .integral>p,
.main .user-detail .coupon>p,
.main .user-detail .vouchers>p,
.main .user-detail .petal>p{
  margin: 10px 0;
  font-size: 13px;
  color: #777;
}
.main .user-detail .look{
  width: 64px;
  height: 20px;
  padding: 3px 10px;
  border: 1px solid #e5e5e5;
  border-radius: 16px;
  color: #666;
  font-size: 12px;
}
.main .user-detail .look:hover{
  border-color: #bbb;
}
/* 中间的主体部分 */
.main .mall-middle{
  display: flex;
  justify-content: space-between;
}
.main .mall-middle a:hover{
  color: #cf0a2c !important;
}
.main .mall-middle .middle {
  flex: 0 0 65%;
}
/* 我的订单 */
.main .mall-middle .middle .my-order{
  display: flex;
  flex-direction: column;
  height: 456px;
  margin-top: 22px;
  border-radius: 12px;
  background: #fff;
  font-size: 14px;
}
.main .mall-middle .middle .my-order a{
  color: #333;
}
.main .mall-middle .middle .my-order .order-detail{
  display: flex;
  padding: 15px 15px 0;
  justify-content: space-between;
  flex: 0 0 10%;
}
.main .mall-middle .middle .my-order .order-detail>span{
  color: #303133;
}
.main .mall-middle .middle .my-order .order-detail>a{
  color: #777;
}
.main .mall-middle .middle .my-order .user-portal{
  flex: 0 0 25%;
  
}
.main .mall-middle .middle .my-order .user-portal>ul{
  display: flex;
  justify-content: space-between;
}
.main .mall-middle .middle .my-order .user-portal>ul>li{
  display: flex;
  flex-direction: column;
  flex: 0 0 20%;
  text-align: center;
}
.main .mall-middle .middle .my-order .user-portal>ul>li>span{
  width: 50px;
  height: 50px;
  margin-left: 40px;
  background: url(../images/icon02.svg) no-repeat center;
}
.main .mall-middle .middle .my-order .user-portal .icon{
  margin-bottom: 15px;
}
.main .mall-middle .middle .my-order .user-portal .icon1{
  background-position: -17px -61px;
}
.main .mall-middle .middle .my-order .user-portal .icon2{
  background-position: -67px -61px;
}
.main .mall-middle .middle .my-order .user-portal .icon3{
  background-position: -119px -61px;
}
.main .mall-middle .middle .my-order .user-portal .icon4{
  background-position: -167px -61px;
}
.main .mall-middle .middle .my-order .user-portal .icon5{
  background-position: -217px -61px;
}
.main .mall-middle .middle .my-order .rcent-orders{
  text-align: center;
  padding-top: 55px;
}
.main .mall-middle .middle .my-order .rcent-orders .no-order{
  width: 120px;
  height: 120px;
  margin: 0 auto;
  background: url(../images/icon02.svg) no-repeat -21px -137px;
}
.main .mall-middle .middle .my-order .rcent-orders p{
  margin: 0 auto;
  font-size: 14px;
  color: #999;
}
.main .mall-middle .middle .my-order .rcent-orders>p>a{
  color: #cf0a2c;
}
/* 最近浏览 */
.main .mall-middle .middle .recent-browsing{
  display: flex;
  flex-direction: column;
  height: 273px;
  margin-top: 45px;
  border-radius: 12px;
  background: #fff;
}
.main .mall-middle .middle .recent-browsing h3{
  height: 20%;
  padding: 18px;
  font-size: 16px;
  font-weight: 400;
  color: #303133;
}
.main .mall-middle .middle .recent-browsing ul{
  display: flex;
}
.main .mall-middle .middle .recent-browsing ul>li>a{
  display: block;
  display: flex;
  flex-direction: column;
  flex: 0 0 25%;
  padding-top: 20px;
  border-right: 1px solid #f6f6f6;
  text-align: center;
}
.main .mall-middle .middle .recent-browsing ul>li>a>div{
  width: 110px;
  height: 110px;
  margin: 0 auto;
}
.main .mall-middle .middle .recent-browsing ul>li>a{
  color: #3a3a3a;
}
.main .mall-middle .middle .recent-browsing ul>li>a:hover{
  color: #3a3a3a !important;
}
.main .mall-middle .middle .recent-browsing ul>li>a>div>img{
  width: 100%;
}
.main .mall-middle .middle .recent-browsing ul>li>a>p:nth-of-type(1){
  width: 138px;
  height: 20px;
  margin: 10px;
    /* 溢出隐藏，并显示省略号 */
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  font-size: 14px;
}
.main .mall-middle .middle .recent-browsing ul>li .color-D0021B{
  font-size: 13px;
  color: #D0021B !important;
}
/* 为你推荐 */
.main .mall-middle .middle .recommend{
  display: flex;
  flex-direction: column;
  height: 456px;
  padding-bottom: 15px;
  margin: 15px 0 50px;
  border-radius: 12px;
  background: #fff;
}
.main .mall-middle .middle .recommend h3{
  font-size: 16px;
  color: #303133;
  line-height: 54px;
  text-indent: 18px;
  font-weight: 400;
}
.main .mall-middle .middle .recommend>div{
  padding: 0 15px;
  height: 200px;
}

.main .mall-middle .middle .recommend>div>img{
  width: 100%;
  border-radius: 10px;
}
/* 右侧侧边栏 */

.main .mall-middle .aside-r{
  padding-top: 40px;
  flex: 0 0 33%;
}
/* 右侧边栏广告 && 我的服务 && 新人见面礼*/
.main .mall-middle .aside-r .ad,
.main .mall-middle .aside-r .serve,
.main .mall-middle .aside-r .new-gift{
  height: 125.7px;
  border-radius: 12px;
  background: #fff;
  margin-bottom: 15px;
}
.main .mall-middle .aside-r .new-gift{
  height: 175px;
}
.main .mall-middle .aside-r .ad>img,
.main .mall-middle .aside-r .new-gift>img{
  width: 100%;
  height: 100%;
  border-radius: 12px;
}
/* 我的服务 */
.main .mall-middle .aside-r .serve>h1{
  font-size: 16px;
  color: #303133;
  line-height: 54px;
  text-indent: 18px;
  font-weight: 400;
}
.main .mall-middle .aside-r .serve .icon-serve{
  display: flex;
  flex-wrap: nowrap;
  font-size: 12px;
  color: #3a3a3a;
}
.main .mall-middle .aside-r .serve .icon-serve>a{
  display: flex;
  flex-direction: column;
  flex: 0 0 25%;
  text-align: center;
}
.main .mall-middle .aside-r .serve .icon-serve .icon{
  width: 40px;
  height: 40px;
  margin: 0 0 5px 20px;
}
.main .mall-middle .aside-r .serve .icon-serve a:hover{
  color: #3a3a3a !important;
}
.main .mall-middle .aside-r .hwydnewfife{
  height: 424px;
  padding: 0 18px 18px;
  background: #fff;
  border-radius: 12px;
  font-size: 16px;
  color: #303133;
}
.main .mall-middle .aside-r .hwydnewfife h3{
  font-size: 16px;
  font-weight: 400;
  line-height: 54px;
  color: #303133;
}
.main .mall-middle .aside-r .hwydnewfife .life img{
  width: 300px;
  height: 116px;
  border-radius: 12px;
}
/* 页面底部 */
.footer{
  width: 100%;
  height: 417px;
}